import React from "react";
import "./index.less";
import { Menu, Button, Col } from "antd";
import MenuConfig from "../../config/menuConfig";
import { NavLink } from "react-router-dom";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
  MailOutlined,
} from "@ant-design/icons";

const { SubMenu } = Menu;

class LeftMenu extends React.Component {
  componentWillMount() {
    const menuTree = this.renderMenu(MenuConfig);
    this.setState({
      menuTree,
    });
  }
  // 菜单渲染
  renderMenu = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <SubMenu
            key={item.key}
            title={
              <span>
                <span>{item.title}</span>
              </span>
            }
          >
            {this.renderMenu(item.children)}
          </SubMenu>
        );
      }
      return (
        <Menu.Item key={item.key}>
          <NavLink to={item.key}>{item.title}</NavLink>
        </Menu.Item>
      );
    });
  };
  render() {
    return (
      <Col span={24} className="menuleft-container">
        <Menu
          mode="inline"
          theme="dark"
          defaultSelectedKeys={["/home"]}
          defaultOpenKeys={["/ui"]}
          className="menuleft"
        >
          {this.state.menuTree}
        </Menu>
      </Col>
    );
  }
}

export default LeftMenu;
